<script lang="ts" setup>
import login from "@/components/login/login.vue";
import register from "@/components/login/register.vue";
import { useStore } from '@/stores/data' 
import { ref } from "vue";
const store = useStore();

const showId = ref(1)
const tabs = ref([
  { id: 1, text: '登录', active: true },
  { id: 2, text: '注册', active: false },
])
const tabTap = (id: number) => {
  showId.value = id
  tabs.value.forEach((item) => {
    item.active = item.id === id
  })
}




</script>

<template>
  <!-- <div>
    <h1>登录</h1>
    <input placeholder="请输入手机号" type="text" v-model="store.login.username" />
    <input placeholder="请输入密码" type="text" v-model="store.login.password" />
    <button @click="store.loginAct()">登录</button>
  </div> -->
  <div class="login-page">
    <div class="logo-container">
      <img class="logo-image" src="@/assets/images/login/logo.png" alt="Logo" />
    </div>
    <div class="tabs">
      <div
        v-for="(item, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ active: item.active }"
        @click="tabTap(item.id)"
      >
        <span class="tab-text">{{ item.text }}</span>
        <div class="tab-line"></div>
        <div class="tab-active"></div>
      </div>
    </div>
    <div class="content">
      <login v-if="showId === 1"/>
      <register v-if="showId === 2"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .login-page {
    width: 100%;
    height: 100vh;
    padding: 0 20px;
    box-sizing: border-box;
    background: url('@/assets/images/login/bg.png') no-repeat center / cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;

    .logo-container {
      display: flex;
      justify-content: center;
      padding-top: 96px;
      margin-bottom: 64px;
      transition: all 0.3s ease;

      .logo-image {
        width: 172px;
        height: 40px;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
        transition: transform 0.3s ease;
        
        &:hover {
          transform: scale(1.05);
        }
      }
    }

    .tabs {
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 400px;
      position: relative;
      z-index: 1;

      .tab-item {
        flex: 1;
        text-align: center;
        font-weight: 500;
        font-size: 18px;
        color: #595959;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        
        .tab-line {
          width: 21px;
          height: 5px;
          margin: 0 auto;
          margin-top: 7px;
          transition: all 0.3s ease;
        }
        
        .tab-active {
          width: 50.5px;
          height: 10.5px;
          margin: 0 auto;
          margin-top: 7px;
          transition: all 0.3s ease;
        }

        &:hover:not(.active) {
          color: #333;
        }

        &.active {
          font-weight: 600;
          color: #1a1a1a;
          
          .tab-line {
            width: 19px;
            height: 4px;
            margin: 7px auto 0;
            background: url('@/assets/images/login/line.png') no-repeat center / contain;
          }

          .tab-active {
            background: url('@/assets/images/login/vector.png') no-repeat center / contain;
            animation: fadeIn 0.5s ease;
          }
        }
      }
    }
    
    .content {
      position: relative;
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      margin-top: -1px;
    }
  }

  // 动画效果
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideUp {
    from { 
      opacity: 0;
      transform: translateY(20px);
    }
    to { 
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scaleIn {
    from { 
      transform: translate(-50%, -50%) scale(0);
    }
    to { 
      transform: translate(-50%, -50%) scale(1);
    }
  }


  // 深色模式支持
  @media (prefers-color-scheme: dark) {
    .login-page {
      .content {
        .login-form, .register-form {
          .form-content {
            background: rgba(255, 255, 255, 0.9);
          }
        }
      }
    }
  }
</style>
